<template>
  <div class="container">
    <van-nav-bar
      title="BScroll组件"
      fixed
      :border="false"
      left-arrow
      @click-left="$router.go('-1')"
    />
    <TabNav :tabs="tabs" :active="activeIndex" @change="ChangeView"></TabNav>
    <BScroll
      :data="list"
      :scrollX="true"
      :scrollY="false"
      :probeType="1"
      :listenScroll="true"
      :openSnap="true"
      @scroll="A_Scroll"
      ref="scroll_wrap"
      class="scroll_wrap"
      @getCurrentPage="getCurrentPage"
    >
      <ul class="tab_content" :style="{width:tabs.length + '00vw'}" ref="tab_item">
        <li v-for="(item,index) in tabs" :key="index">
          <TabItem :list="[40]"></TabItem>
        </li>
      </ul>
    </BScroll>
  </div>
</template>

<script>
import TabNav from "./tabs/TabNav";
import TabItem from "./tabs/TabItem";
export default {
    components: { TabItem, TabNav },
    data() {
        return {
            list: [],
            tabs: ["推荐", "热门", "追番", "影视", "音乐", "动漫"],
            active: 0,
            startY: 0,
            startX: 0,
            scroll_wrap: {}, //轮播对象
            tab_item_width: "",
            activeIndex: 0,
            scrolldis: [], //滚动距离存储
        };
    },
    mounted() {
        this.$nextTick(() => {
            this.scroll_wrap = this.$refs.scroll_wrap;
            // this.tab_item_width = this.$refs.tab_item[0].clientWidth;
        });
    },
    methods: {
        ChangeView(index) {
            this.scroll_wrap.scroll.goToPage(index, 0, 300, "ease");
        },
        A_Scroll(e) {
            // 获取当前页
            // console.log("scroll_wrap",this.scroll_wrap);
            // let pageIndex = this.scroll_wrap.getCurrentPage();
            // console.log('pageIndex',pageIndex);
            console.log("e", e);
            this.scrolldis[this.activeIndex] = e.y;
        },
        getCurrentPage(e) {
            this.activeIndex = e.pageX;
        },
    },
};
</script>

<style lang="less" scoped>
.container {
    width: 100vw;
    // height: 100vh;
    box-sizing: border-box;
    .scroll_wrap {
        height: calc(100vh - 300px);
        width: 100%;
        // white-space: nowrap;
        margin: 0 auto;
        overflow: hidden;
        margin-bottom: 10px;
        li {
            width: 100%;
            height: 100%;
        }
    }
    .tab_content {
        display: flex;
        li {
            flex-shrink: 0;
            width: 100vw;
            height: 100%;
            font-size: 36px;
            text-align: center;
            border-right: 1px solid #eee;
        }
    }
}
</style>
